﻿@{
    Layout = "~/Areas/User/Views/Shared/_Layout.cshtml";
}

@section Title{
    用户中心-美妆商城
}

@section Meta{
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta property="qc:admins" content="56207406376255516375" />

    @*<link rel="stylesheet" href="http://s0.jmstatic.com/templates/jumei/css/v45.3/jumei_usercenter.min.css?v7" type="text/css" media="screen" charset="utf-8" />*@
    <link href="~/Content/User/css/jumei/jumei_usercenter.min.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript">
        $(".orderInfo").click(function () {
            var id = $(this).attr("id").val();
            alert(id);
            $.ajax({
                url: '/User/Account/UserCenterInfo?id=' + id,
                type: 'POST',
                dataType: 'string',
                success: function (data) {
                    $("#order-list").html(data);
                }
            })
            $(".filter a").removeClass("curr");
            $(this).addClass("curr");
        })


    </script>

}


<div class="profile">
    <script src="http://s0.jmstatic.com/templates/jumei/js/jquery/jquery.selectui.min.js"></script>

    <div class="nav">
        <div class="notice">
            <a href="/i/account/avatar" target="_blank" style="border-bottom: 0;padding:0;">
                @*<img src="http://f0.jmstatic.com/static_account/dist/20160913/images/user_avatar/2/64_64.png" alt="JM136NBPE0583" />*@
                <img src=@ViewBag.userImage alt=@ViewBag.Name />
            </a>
            <p class="nickname"><a style="padding-left:0;line-height: 1.8;color:#ed145b" href="/i/account/settings" target="_blank">@ViewBag.Name</a></p>
            <p><a style="padding-left:0;line-height: normal;" href="/i/membership" target="_blank">普通会员</a></p>
            <p class="uid">用户ID:@ViewBag.UserId </p>
            <!--<p>可提现余额：{$balance}元</p>
            <p>不可提现余额：{$balance_no_withdraw}元</p>-->
        </div>
        <h2><b></b>我的聚美优品</h2>
        <a href="/i/order/list" class="list selected"><b></b>我的订单</a>
        <a href="/i/wishdeal/onsale" class="wish"><b></b>我的心愿单</a>
        <a href="/i/product/fav_products" class="fav"><b></b>我的收藏</a>
        <h2><b></b>管理个人账户</h2>
        <a href="/i/account/settings" class="settings"><b></b>设置账户信息</a>
        <a href="/i/account/password" class="password"><b></b>修改密码</a>
        <a href="/i/account/mobile_bind_status" class="bind"><b></b>绑定手机</a>
        <a href="/i/account/addresses" class="addr"><b></b>管理收货地址</a>




    </div>



    <div class="sp_icon_pos_wrapper">
    </div>

    @* test Start *@
    <h1>设置账户信息</h1>
    <div class="content">
        <form id="settings-form" method="post" action="/i/account/settings">
            <input type="hidden" name="jm_form_hash" id="jm_form_hash" value="b90fdc0c" />
            @*<div class="avatar_change">
                <img src="http://f0.jmstatic.com/static_account/dist/20160913/images/user_avatar/2/200_200.png?1491923212" alt="大头像" />
                <a href="/i/account/avatar" class="changeavatar">修改头像</a>
            </div>*@

            <div class="input_container">
                <label for="settings-username" style="font-weight:normal"><span class="spark">*</span>用户名</label>
                <input required type="text" size="30" name="username" id="settings-username" class="t_input" value="JM136NBPE0583">
                <span class="valueMissing">请填写您的用户名</span>
                <span class="patternMismatch">应为4-16个中英文字符，不能以数字开头</span>
                <span class="customError">应为4-16个中英文字符，不能以数字开头</span>
            </div>

            <dl class="formlist">
                <dt style="line-height: 2.48;">Email</dt>
                <dd style="line-height: 2.48;">
                    <span class="data">您还未绑定邮箱</span>
                    <a href="/i/account/change_email" class="btn_mid_pink">立即绑定</a>
                </dd>
            </dl>

            <dl class="formlist">
                <dt>手机号</dt>
                <dd>
                    <span class="data">136****0583</span>
                    <a style="color:#ed145b" href="/i/account/mobile_bind"  class="changeMob" target="_blank">修改</a>
                    <span class="hint">已验证</span>
                </dd>
            </dl>

            <div class="input_container">
                <label>性别</label>
                <label class="radio">
                    <span class="radio_ui">
                        <input name="gender" type="radio" id="gender_f" autocomplete="off" value="2" checked="checked" />
                        <b></b>
                    </span>
                    女
                </label>
                <label class="radio">
                    <span class="radio_ui">
                        <input name="gender" type="radio" id="gender_m" autocomplete="off" value="1" />
                        <b></b>
                    </span>
                    男
                </label>
            </div>
            <div class="input_container">
                <label><span class="spark">*</span>生日</label>
                <select id="birthday_year" name="birthday_year">
                    <option selected="selected" value=""></option>
                    <option value="2010">2010</option>
                    <option value="2009">2009</option>
                    <option value="2008">2008</option>
                    <option value="2007">2007</option>
                    <option value="2006">2006</option>
                    <option value="2005">2005</option>
                    <option value="2004">2004</option>
                    <option value="2003">2003</option>
                    <option value="2002">2002</option>
                    <option value="2001">2001</option>
                    <option value="2000">2000</option>
                    <option value="1999">1999</option>
                    <option value="1998">1998</option>
                    <option value="1997">1997</option>
                    <option value="1996">1996</option>
                    <option value="1995">1995</option>
                    <option value="1994">1994</option>
                    <option value="1993">1993</option>
                    <option value="1992">1992</option>
                    <option value="1991">1991</option>
                    <option value="1990">1990</option>
                    <option value="1989">1989</option>
                    <option value="1988">1988</option>
                    <option value="1987">1987</option>
                    <option value="1986">1986</option>
                    <option value="1985">1985</option>
                    <option value="1984">1984</option>
                    <option value="1983">1983</option>
                    <option value="1982">1982</option>
                    <option value="1981">1981</option>
                    <option value="1980">1980</option>
                    <option value="1979">1979</option>
                    <option value="1978">1978</option>
                    <option value="1977">1977</option>
                    <option value="1976">1976</option>
                    <option value="1975">1975</option>
                    <option value="1974">1974</option>
                    <option value="1973">1973</option>
                    <option value="1972">1972</option>
                    <option value="1971">1971</option>
                    <option value="1970">1970</option>
                    <option value="1969">1969</option>
                    <option value="1968">1968</option>
                    <option value="1967">1967</option>
                    <option value="1966">1966</option>
                    <option value="1965">1965</option>
                    <option value="1964">1964</option>
                    <option value="1963">1963</option>
                    <option value="1962">1962</option>
                    <option value="1961">1961</option>
                    <option value="1960">1960</option>
                    <option value="1959">1959</option>
                    <option value="1958">1958</option>
                    <option value="1957">1957</option>
                    <option value="1956">1956</option>
                    <option value="1955">1955</option>
                    <option value="1954">1954</option>
                    <option value="1953">1953</option>
                    <option value="1952">1952</option>
                    <option value="1951">1951</option>
                    <option value="1950">1950</option>
                    <option value="1949">1949</option>
                </select>

                <select id="birthday_month" name="birthday_month">
                    <option selected="selected" value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>

                <select id="birthday_day" name="birthday_day">
                    <option selected="selected" value=""></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
                <span class="otherError">请填写您的生日</span>
                
            </div>

            <div class="act">
                <input type="button" value="保存修改" name="commit" id="settings-submit">
            </div>
        </form>
    </div>
    @* test End *@




    <style>
        label {
            font-weight:normal;
        }
         a:hover {
            text-decoration:underline;
        }
        
         .profile td a.sp_icon {
            display: inline-block;
        }

        .order_package span {
            padding-right: 0;
        }

        .profile .filter + table th {
            border: 1px solid rgb(219, 214, 208);
            border-top: 0;
        }
    </style>

    <style type="text/css">
        #dialog2 {
            display: block;
            height: 207px;
            width: 394px;
            position: relative;
            padding-top: 30px;
            overflow: hidden;
        }

        #cboxContent {
            border: none;
            background: url(http://p0.jmstatic.com/templates/jumei/images/account/corn_line.jpg) repeat-x bottom center;
            background-color: #767676;
        }

        #cboxLoadedContent {
            margin-top: 28px;
        }

        #cboxTitle {
            font-size: 14px;
            color: #FFF;
            top: 0px;
        }

        #cboxClose {
            top: 0;
            text-indent: 9999px;
            height: 28px;
            overflow: hidden;
        }

        .dia_pic {
            width: 120px;
            height: 120px;
            float: left;
            background: url(http://p0.jmstatic.com/templates/jumei/images/account/corn_00.jpg) no-repeat 20px;
        }

        .dia_con {
            width: 250px;
            margin-left: 20px;
            float: left;
            color: #333;
        }

            .dia_con p {
                font-size: 12px;
                line-height: 22px;
            }

                .dia_con p.dia_title {
                    font-size: 20px;
                    line-height: 36px;
                    font-weight: bold;
                }

        .return {
            width: 74px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            background: url(http://p0.jmstatic.com/templates/jumei/images/home/btn_mid_pink.jpg) no-repeat top center;
            display: inline-block;
            color: #FFF;
            font-size: 14px;
            letter-spacing: 2px;
            margin: 20px 0 0 140px;
        }

            .return:hover {
                text-decoration: none;
            }
    </style>


    <style>
        #table-header-fixed {
            width: 769.5px;
            position: fixed;
            top: 0px;
            display: none;
            z-index: 2;
        }

            #table-header-fixed th {
                font-weight: normal;
                background: none;
                color: #afafaf;
            }
    </style>
    <script>
        $(function () {
            /* 去除最后一行分隔的border */
            $('.separator:last td').css({ 'border-bottom-color': 'white' });
            /* 固定表头 */
            //!($.browser.msie && $.browser.version < 8)
            if (true) {
                var $table = $("#order-list");

                if ($table[0]) {
                    var tableOffset = $table.offset().top + 100;
                    var $header = $("#order-list .order_list_title").clone();
                    var $fixedHeader = $("#table-header-fixed").append($header);

                    $(window).bind("scroll", function () {
                        var offset = $(this).scrollTop();

                        if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
                            $fixedHeader.show();
                        }
                        else if (offset < tableOffset) {
                            $fixedHeader.hide();
                        }
                        if (offset > tableOffset + $table.height()) {
                            $fixedHeader.hide();
                        }
                    });
                }
            }

            var threshold = 1000;
            var is_mouseout_popup = false;

            function hidePopup() {
                if (is_mouseout_popup) {
                    $('.sp_icon_pos_wrapper').hide().removeClass('real_name_wrapper');
                }
            }

            $('.sp_icon.sp_icon_trigger').hover(function () {
                var $this = $(this);
                var html = $this.find('.sp_icon_pos_inner').html();
                var offset = $this.offset();
                offset.left = offset.left - 30;
                offset.top = offset.top + 20;
                $('.sp_icon_pos_wrapper').html(html).css(offset).show().addClass('real_name_wrapper');
                is_mouseout_popup = false;
            }, function () {
                is_mouseout_popup = true;
                setTimeout(hidePopup, threshold);
            });

            $('.sp_icon_pos_wrapper').hover(function () {
                is_mouseout_popup = false;
            }, function () {
                is_mouseout_popup = true;
                setTimeout(hidePopup, threshold);
            });

        });
    </script>


    <style>
        .profile td.insert_td_empty {
            border-top: solid 1px white;
            border-bottom: solid 1px white;
        }

        .sp_icon_pos_inner {
            display: none;
        }

        .sp_icon_pos_wrapper {
            position: absolute;
            z-index: 2;
            border: 1px solid #DBD6D0;
            /* width: 300px; */
            max-width: 220px;
            _width: 220px;
            line-height: 18px;
            padding: 5px 12px;
            background: #FCFCFC;
            color: #676767;
            display: none;
        }
    </style>

    <style>
        .cancel_success_input_tip {
            display: inline-block;
            text-decoration: none;
            background: #ec195c;
            background: -webkit-gradient(linear, left top, left bottom, from(#f4769d), to(#ec195c));
            background: -webkit-linear-gradient(top, #f4769d, #ec195c);
            background: -moz-linear-gradient(top, #f4769d, #ec195c);
            background: -o-linear-gradient(top, #f4769d, #ec195c);
            background: linear-gradient(to bottom, #f4769d, #ec195c);
            -webkit-box-shadow: 0 1px 2px 0 #bbb;
            text-decoration: none;
            box-shadow: 0 1px 2px 0 #bbb;
            text-shadow: 1px 1px 3px #b9154a;
            vertical-align: middle;
            display: inline-block;
            font-family: inherit;
            word-break: keep-all;
            white-space: nowrap;
            font-weight: normal;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            height: 32px;
            width: 114px;
            color: #fff;
            border: 0;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffee1658, endColorStr=#ffee2467), progid:DXImageTransform.Microsoft.DropShadow(color=#ffb2b2b2, offX=0, offY=1, positives=true);
        }

            .cancel_success_input_tip:hover {
                text-decoration: none;
            }

        .cancel_success_layer_wrap {
            padding: 60px 20px 40px;
            text-align: center;
        }

        .cancel_success_input_wrap p {
            line-height: 50px;
        }

        .img_ok {
            background: url(http://s0.jmstatic.com/templates/jumei/images/ok.gif) no-repeat;
            padding-left: 36px;
            line-height: 36px;
            display: inline-block;
            font-size: 18px;
        }

        .order_info_td {
            width: 191px;
        }

        table {
            table-layout: fixed;
            width: 769px;
        }
    </style>
    @*<script src="http://f3.jmstatic.com/static_account/dist/20170406_1/js/boot.js"></script>
        <link rel="stylesheet" href="http://f1.jmstatic.com/static_account/dist/20170406_1/css/sweet-alert.css">
        <script>
            window.STATIC_FOLDER = "http://f1.jmstatic.com/static_account/dist/20170406_1/";
            $(function () {
                seajs.use('order/list');
                seajs.use('pcviews/yiqituan');

                //回到顶部跟随 footer
                $(window).bind('scroll resize', function () {
                    var bottomPx = $(window).scrollTop() - $('#footer_container').position().top + $(window).height();

                    if (bottomPx > 90) {
                        bottomPx = bottomPx + 20 + 'px';
                        $('.backtotop').css('bottom', bottomPx);
                    } else {
                        $('.backtotop').css('bottom', '100px');
                    }
                });

            });
        </script>*@

</div>
<div class="clear"></div>

